import {Search} from '@/components';
import {Box, Center, Divider, Flex, Heading, HStack, Icon, IconButton, ScrollView, Stagger, Text, useDisclose} from 'native-base';
import React from 'react';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';

import SvgIcons from '@/assets/svg';

const Live = () => {
  const {isOpen, onToggle} = useDisclose();
  const insets = useSafeAreaInsets();
  const renderDivider = () => {
    return <Divider h="2" bg="gray.100" />;
  };
  const renderGrid = (title: string, list: any[]) => {
    return (
      <>
        <Heading pl="4" size="sm" lineHeight="3xl">
          <Text>{title}</Text>
        </Heading>
        <Flex direction="row" wrap="wrap">
          {list.map((_, index) => (
            <Box
              key={index}
              w="1/3"
              h={120}
              borderRightWidth={index % 3 !== 2 ? 1 : 0}
              borderBottomWidth={1}
              borderLeftWidth={index % 3 === 0 ? 1 : 0}
              borderTopWidth={index < 3 ? 1 : 0}
              borderColor="gray.300"
              bg="white">
              <Center flex={1}>
                <SvgIcons.Leisure width={24} height={24} color="#52525b" />
                <Text>{_}</Text>
              </Center>
            </Box>
          ))}
        </Flex>
        {renderDivider()}
      </>
    );
  };
  const list = [
    ['身体健康', '心理情感', '个人修行', '人生印记', '个人交际', '通信录', '放飞自我', '体育锻炼', '休闲娱乐'],
    ['情感关系', '抚养子女', '赡养老人', '家庭亲属', '朋友伙伴', '社会资源', '日常生活', '家庭会议录', '家庭社交', '金融财富', '交通工具', '房屋资产'],
    ['境界格局', '能力体系', '终生学习', '学习规划', '学习管理', '我育实践', '家庭培育', '教育培训', '自我学习'],
    ['理想目标', '兴趣爱好', '职业性格', '职业生涯', '发展规划', '模拟推演', '职业技能', '岗位工作', '职业实践', '事业平台', '就业舞台', '合作伙伴'],
    ['社会情感', '个人精神', '家风家教', '社会影响', '社会价值', '社会责任', '公益活动', '社会服务', '社会实践'],
  ];
  return (
    <SafeAreaView style={{flex: 1}} edges={['left', 'right']}>
      <Box w="full" h="full" bg="white" style={{paddingTop: insets.top}} position="relative">
        <Search />
        <Box position="absolute" right={8} style={{top: insets.top + 40}} zIndex={10000}>
          <HStack alignItems="center">
            <IconButton
              variant="solid"
              borderRadius="full"
              _pressed={{
                bg: 'cyan.400',
              }}
              size="lg"
              onPress={onToggle}
              bg="cyan.400"
              icon={<Icon as={<SvgIcons.ChevronLeftIcon width={24} height={24} style={{transform: [{rotate: '270deg'}]}} color="white" />} size="6" />}
            />
          </HStack>
          <Box alignItems="center" minH="220">
            <Stagger
              visible={isOpen}
              initial={{
                opacity: 0,
                scale: 0,
                translateY: 34,
              }}
              animate={{
                translateY: 0,
                scale: 1,
                opacity: 1,
                transition: {
                  type: 'spring',
                  mass: 0.8,
                  stagger: {
                    offset: 30,
                  },
                },
              }}
              exit={{
                translateY: 34,
                scale: 0.5,
                opacity: 0,
                transition: {
                  duration: 100,
                  stagger: {
                    offset: 30,
                  },
                },
              }}>
              <IconButton
                mb="4"
                mt="4"
                variant="solid"
                bg="indigo.500"
                colorScheme="indigo"
                borderRadius="full"
                icon={<Icon as={<SvgIcons.ChevronLeftIcon width={24} height={24} color="#52525b" />} />}
              />
              <IconButton mb="4" variant="solid" bg="yellow.400" colorScheme="yellow" borderRadius="full" icon={<Icon as={<SvgIcons.ChevronLeftIcon width={24} height={24} color="#52525b" />} />} />
              <IconButton mb="4" variant="solid" bg="teal.400" colorScheme="teal" borderRadius="full" icon={<Icon as={<SvgIcons.ChevronLeftIcon width={24} height={24} color="#52525b" />} />} />
              <IconButton mb="4" variant="solid" bg="red.500" colorScheme="red" borderRadius="full" icon={<Icon as={<SvgIcons.ChevronLeftIcon width={24} height={24} color="#52525b" />} />} />
            </Stagger>
          </Box>
        </Box>
        <ScrollView showsVerticalScrollIndicator={false} bounces={false}>
          {renderGrid('个人生活', list[0])}
          {renderGrid('家庭生活', list[1])}
          {renderGrid('学习实践', list[2])}
          {renderGrid('工作事业', list[2])}
          {renderGrid('社会生活', list[2])}
        </ScrollView>
      </Box>
    </SafeAreaView>
  );
};

export default Live;
